<template>
	<el-dialog title="新增" :close-on-click-modal="false" :visible.sync="visible" width="55%">
		<el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px" :inline="true">
			<h3>客户资料</h3>
			<div class="title_ls"></div>
			<el-form-item v-for="item in cusFieldList" :key="item.colName" :prop="item.colName" :label="item.colValue">
				<el-input v-model="dataForm[item.colName]" v-if="item.colType === '0'" type="text"></el-input>
				<el-input v-model="dataForm[item.colName]" v-if="item.colType === '1'" type="tel"></el-input>
				<el-date-picker v-model="dataForm[item.colName]" v-if="item.colType === '2'" size="mini" type="datetime" placeholder="选择日期时间" style="width: 180px;">
				</el-date-picker>
				<el-input v-model="dataForm[item.colName]" v-if="item.colType === '3'" type="email"></el-input>
				<el-input v-model="dataForm[item.colName]" v-if="item.colType === '4'" type="textarea"></el-input>
				<el-select v-model="dataForm[item.colName]" placeholder="请选择" v-if="item.colType === '5'">
				    <el-option v-for="item in item.colExtend" :key="item.key" :label="item.value" :value="item.key">
				    </el-option>
				</el-select>				
			</el-form-item>
		</el-form>
		<span slot="footer" class="dialog-footer">
      <el-button @click="refreshDialog">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
	</el-dialog>
</template>

<script>
	import dateUtil from '@/utils/dateUtil'
	export default {
		data() {
			return {
				visible: false,
				dataForm: {
					cusName: '',
					cusPhone: '',
					cusAddress: '',
					cusOpenId: '',
					cusVisitorId: '',
					cusVedioVisitorId:'',
					cusDesc: '',
					cusExt1: '',
					cusExt2: '',
					cusExt3: '',
					cusExt4: '',
					cusExt5: '',
					cusExt6: '',
					cusExt7: '',
					cusExt8: '',
					cusExt9: '',
					cusExt10: '',
					cusExt11: '',
					cusExt12: '',
					cusExt13: '',
					cusExt14: '',
					cusExt15: '',
					cusExt16: '',
					cusExt17: '',
					cusExt18: '',
					cusExt19: '',
					cusExt20: '',
					cusExt21: '',
					cusExt22: '',
					cusExt23: '',
					cusExt24: '',
					cusExt25: '',
				},
				id: '',
				cusFieldList: [],
				tagsCheckedList: [],
				tagsList: [],
				updateDialog:true
			}
		},
		filters: {
			formatDateTime(timestamp) {
				return dateUtil.formatDateTime(timestamp)
			}
		},
		created() {
		},
		components: {
		},
		methods: {
			init(item) {
				var that = this
				that.visible = true
				this.$nextTick(() => {
					this.$refs['dataForm'].resetFields()
					this.$http.post('/cc/customer/manage/add',{}).then(resp => {
						console.log("添加客户信息==>",resp.data)
						var cusFieldList = resp.data;
						for(var i = 0; i < cusFieldList.length; i++){
							if(cusFieldList[i].colType == '5' && cusFieldList[i].colExtend != ''){
								cusFieldList[i].colExtend =  JSON.parse(cusFieldList[i].colExtend);
							}
						}
						that.cusFieldList = cusFieldList
					})
				})

			},
			// 表单提交
			dataFormSubmit() {
				var that = this
				that.$refs['dataForm'].validate((valid => {
					if(valid) {
						this.$http.post('/cc/customer/manage/save',{
							id: that.dataForm.id || undefined,
							cusName: that.dataForm.cusName,
							cusPhone: that.dataForm.cusPhone,
							cusAddress: that.dataForm.cusAddress,
							cusCreateDate: that.dataForm.cusCreateDate,
							cusCreateUsername: that.dataForm.cusCreateUsername,
							cusOpenId: that.dataForm.cusOpenId,
							cusVisitorId: that.dataForm.cusVisitorId,
							cusVedioVisitorId:that.dataForm.cusVedioVisitorId,
							cusDesc: that.dataForm.cusDesc,
							cusExt1: that.dataForm.cusExt1,
							cusExt2: that.dataForm.cusExt2,
							cusExt3: that.dataForm.cusExt3,
							cusExt4: that.dataForm.cusExt4,
							cusExt5: that.dataForm.cusExt5,
							cusExt6: that.dataForm.cusExt6,
							cusExt7: that.dataForm.cusExt7,
							cusExt8: that.dataForm.cusExt8,
							cusExt9: that.dataForm.cusExt9,
							cusExt10: that.dataForm.cusExt10,
							cusExt11: that.dataForm.cusExt11,
							cusExt12: that.dataForm.cusExt12,
							cusExt13: that.dataForm.cusExt13,
							cusExt14: that.dataForm.cusExt14,
							cusExt15: that.dataForm.cusExt15,
							cusExt16: that.dataForm.cusExt16,
							cusExt17: that.dataForm.cusExt17,
							cusExt18: that.dataForm.cusExt18,
							cusExt19: that.dataForm.cusExt19,
							cusExt20: that.dataForm.cusExt20,
							cusExt21: that.dataForm.cusExt21,
							cusExt22: that.dataForm.cusExt22,
							cusExt23: that.dataForm.cusExt23,
							cusExt24: that.dataForm.cusExt24,
							cusExt25: that.dataForm.cusExt25,
							tagsCheckedList: that.tagsCheckedList
						}).then(resp => {
							console.log("保存客户信息==>",resp.data)
							if(resp.data.code === '0') {
								that.$message({
									message: '操作成功',
									type: 'success',
									duration: 1000,
									onClose: () => {
										that.$emit('refreshDataList')
									}
								});
								that.refreshDialog()
							} else {
								that.$message.error('操作失败')
							}
						})

					}
				}))
			},
			refreshDialog(){
				var that = this
				that.updateDialog = false
	            that.$nextTick(() => {
	                that.updateDialog = true
	            })
	            that.visible = false
			}

		}
	}
</script>
<style>
	.title_ls {
		width: 100%;
		height: 2px;
		border-top: 2px solid #409EFF;
		clear: both;
		margin-bottom: 20px;
	} 
</style>
<style scoped="scoped">
	.el-input{
		width: 218px;
	}
	.el-select{
		width: 218px;
	}
</style>